<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <el-col :span="12">
          <el-button size="small" type="primary" @click="isShowBtn">添加客户</el-button>
        </el-col>
        <el-col :span="2">
          <el-dropdown>
            <el-button size="small">
              全部客户<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>

        <el-col :span="8">
          <el-dropdown disabled="true" placement="bottom-start" trigger="click" @command="ChangeValue" @click.native="isShowDropdown">
            <el-input ref="seachInput" v-model.trim="name_contains" style="width:400px" type="" size="small" placeholder="请输入关键字" class="input-with-select" />
            <el-button size="small" @click="searchAgents">筛选</el-button>

            <el-dropdown-menu v-show="isDropdown" slot="dropdown">
              <el-dropdown-item v-if="myHistory.length===0" disabled>没有历史记录</el-dropdown-item>
              <el-dropdown-item v-for="item,index in myHistory" :key="index" :command="item">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>

      <el-divider />
      <!-- 放置表格和分页 -->
      <el-table :data="formData" border>
        <el-table-column label="图片" align="center">
          <template v-slot="{row}">
            <img :src="row.image" alt="我是头像" class="img">
          </template>
        </el-table-column>

        <el-table-column label="名称" prop="name" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="客户" prop="phone" />
        <el-table-column label="微信" prop="wechat" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="primary" size="small" @click="editsKundeFn(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delKundeFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :page-size="5"
          :current-page="currentPage"
          layout="prev, pager, next"
          :total="total"
          @prev-click="prevClick"
          @next-click="nextClick"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>

    <!-- 弹出框 -->
    <myDialog v-if="isShow" ref="myDialog" :is-show.sync="isShow" :kunde-list="KundeList" :kunde-count="KundeCount" @update="KundeList" />

  </div>

</template>

<script>
import { KundeList, KundeCount, delKundeFn } from '@/api/myclient'
import myDialog from './components/dialog.vue'
export default {
  components: {
    myDialog
  },
  data() {
    return {
      formData: [],
      page: {
        _limit: 5, // 查询多少条
        _start: 0, // 多少条开始
        name_contains: null// 查询的名字
      },
      total: 0, // 多少条数据
      currentPage: 1, // 当前页
      isShow: false, // 控制模态框显示隐藏
      name_contains: null,
      isDropdown: true, // 控制搜索显示
      myHistory: JSON.parse(localStorage.getItem('myHistory')) || []// 历史记录
    }
  },
  async created() {
    // 获取客户列表
    await this.KundeList()
    // 获取客户数量
    await this.KundeCount()
  },
  methods: {
    // 获取客户列表
    async KundeList() {
      const res = await KundeList(this.page)
      this.formData = res
      console.log(1, res)
    },
    // 获取客户数量
    async KundeCount() {
      const res = await KundeCount(this.page.name_contains)
      this.total = res
      console.log(res)
    },
    // 上一页
    prevClick() {
      this.page._start -= 5
      this.KundeList()
    },
    // 下一页
    nextClick() {
      this.page._start += 5
      this.KundeList()
    },
    // 点击获取当前页
    currentChange(val) {
      this.page._start = 5 * (val - 1)
      this.KundeList()
    },
    // 显示弹出框
    isShowBtn() {
      console.log(1)
      this.isShow = true
    },
    // 删除
    async delKundeFn(id) {
      try {
        const res = await this.$confirm('确定要删除当前客户吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        console.log(res)
        // 根据id删除
        await delKundeFn(id)
        // 获取客户列表
        await this.KundeList()
        // 获取客户数
        await this.KundeCount()
        this.$message.success('删除成功!')
      } catch {
        this.$message.warning('取消删除成功!')
      }
    },
    // 编辑回显
    editsKundeFn(id) {
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.myDialog.title = '编辑'
        this.$refs.myDialog.editsKundeFn(id)
      })
    },
    // 点击搜索客户
    async  searchAgents() {
      this.page.name_contains = this.name_contains
      const flag = this.myHistory.includes(this.name_contains)
      if (this.name_contains && !flag) {
        this.myHistory.push(this.name_contains)
      }
      localStorage.setItem('myHistory', JSON.stringify(this.myHistory))
      // 获取客户列表
      await this.KundeList()
      // 获取客户数
      await this.KundeCount()
    },
    // 判断是否隐藏
    isShowDropdown(e) {
      const flag = e.target.classList.contains('el-input__inner')
      console.log(flag)
      if (flag) {
        this.isDropdown = true
      } else {
        this.isDropdown = false
      }
    },
    // 给输入框赋值历史记录
    async  ChangeValue(val) {
      this.name_contains = this.page.name_contains = val
      // 获取客户列表
      await this.KundeList()
      // 获取客户数
      await this.KundeCount()
    }
  }

}
</script>

<style>
img{
  width: 100%;
  height: 100%;
}
</style>
